<div fxLayout="rows" class="bordered job-card light-background">
  <div fxLayout="column" fxFlex="100%" fxLayoutGap="1px" class="job-content">
    <div fxLayout="rows">
      <i
        nz-icon
        [nzType]="job.type?.icon"
        class="icon"
        [style.color]="job.type?.color"
      ></i>
      <strong class="title">{{ job.name }}</strong>
      <div>
        <span *ngIf="job.totalBonusUi.gt(0)" class="monospace">
          +{{ job.totalBonusUi | format }}%
        </span>
      </div>
    </div>
    <div>
      <p *ngIf="showDescription" class="description">{{ job.description }}</p>
    </div>
    <span
      class="monospace"
      fxLayout="row"
      fxLayout.xs="column"
      fxLayoutAlign="space-between"
    >
      <span>
        <i nz-icon nzType="clock-circle" nzTheme="outline" class="space"></i>
        <span> {{ job.timeToEnd | time }}</span>
      </span>
      <span class="text-secondary">
        {{ job.progress | format }}/{{ job.total | format }}
        {{ job.progressPercent }}%</span
      >
    </span>
    <app-progress [progress]="job.progressPercent"></app-progress>
  </div>

  <div fxLayout="column" fxLayoutAlign="space-between" class="buttons">
    <button
      nz-button
      nzType="link"
      nzSize="small"
      (click)="moveUp()"
      *ngIf="collection"
    >
      <i nz-icon nzType="arrow-up"></i>
    </button>
    <button
      nz-button
      nzType="link"
      nzSize="small"
      *ngIf="job.canDelete"
      (click)="job.delete()"
    >
      <i nz-icon nzType="delete"></i>
    </button>
    <button
      nz-button
      nzType="link"
      nzSize="small"
      (click)="moveDown()"
      *ngIf="collection"
    >
      <i nz-icon nzType="arrow-down"></i>
    </button>
  </div>
</div>
